<div class="easyui-tabs" fit="true" border="false">
    <div title="用户管理1" border="false">
        <table id="dg"></table>
    </div>
</div>
<script>
    var editrow = undefined;
    $('#dg').datagrid({
        url: 'datagrid_data.json',
        title: "数据展示",
        iconCls: "icon-save",
        pagination: true,
        pageSize: 5,
        pageList: [5, 20, 30, 40, 50],
        fit: true,
        fitColumns: false,
        nowrap: true,
        border: false,
        idField: "id", //记住标识列，跨页翻页操作用
        sortOrder: "name",
        columns: [[
            {
                field: 'name',
                title: '姓名',
                width: 100,
                checkbox: true,
                editor: {
                    type: "validatebox",
                    options: {
                        required: true
                    }
                }
            },
            {
                field: 'age',
                title: '年龄',
                width: 100,
                editor: {
                    type: "validatebox",
                    options: {
                        required: true
                    }
                }

            },
            {
                field: 'address',
                title: '地址',
                width: 100,

            }
    ]],
        toolbar: [{
                "text": "添加",
                iconCls: "icon-add",
                handler: function () {
                    if (editrow != undefined) {
                        $('#dg').datagrid("endEdit", editrow);
                    }

                    if (editrow == undefined) {
                        //appendRow
                        $('#dg').datagrid('insertRow', {
                            index: 0,
                            row: {

                            }
                        });
                        var rows = $('#dg').datagrid("getRows");
                        //editrow = rows.length - 1;
                        console.log(rows.length);
                        editrow = 0;
                        $('#dg').datagrid("beginEdit", editrow);

                    }
                }
            },
            {
                "text": "删除",
                iconCls: "icon-remove",
                handler: function () {
                    var rows = $('#dg').datagrid("getSelections");
                    if (rows.length >= 1) {
                        $.messager.confirm('请确认', '确定要删除么?', function (r) {
                            if (r) {
                                alert('ok');
                            }
                        });
                    } else {
                        $.messager.alert('Warning', 'The warning message');
                    }

                }
            }, '-',
            {
                "text": "修改",
                iconCls: "icon-edit",
                handler: function () {
                    var rows = $('#dg').datagrid("getSelections");
                    if (rows.length == 1) {
                        if (editrow != undefined) {
                            $('#dg').datagrid("endEdit", editrow);
                        }

                        if (editrow == undefined) {
                            var index = $('#dg').datagrid("getRowIndex", rows[0]);
                            $('#dg').datagrid("beginEdit", index);
                            editrow = index;
                        }
                    }

                }
            },
            {
                "text": "保存",
                iconCls: "icon-save",
                handler: function () {
                    $('#dg').datagrid("endEdit", editrow);
                    editrow = undefined;

                }
            },
            {
                "text": "取消",
                iconCls: "icon-redo",
                handler: function () {
                    editrow = undefined;
                    $('#dg').datagrid("rejectChanges");

                }
            }
        ],
        onAfterEdit: function (index, row, changes) {
            console.log(row);
        },
        onDblClickRow: function (index, row) {
            if (editrow != undefined) {
                $('#dg').datagrid("endEdit", editrow);
            }

            if (editrow == undefined) {
                $('#dg').datagrid("beginEdit", index);
                editrow = index;

            }
        }

    });
</script>